<template>
	<view>

		<yingbing-ReadPage ref="page" @loadmore="more1" @change="tochange" :clickOption="clickOption" enableClick
			@clickTo="To" style="height: 100vh; "></yingbing-ReadPage>
		<view class="" v-if="menuShow"
			style="position: absolute; background: #fcd281;  bottom: 0; display: flex; justify-content: space-around; width: 100%;height:8vh;align-items: center;">
			<p @click="toupper">上一章</p>
			<p @click="todirectory">目录</p>
			<p @click="toBelow">下一章</p>
		</view>
		<!--  -->
		<view class="">
			<uni-popup ref="popup" type="left">

				<view class="popup-inner1">

					<view class="" style="display: flex; align-items: center;">
						<view class="" style="padding: 40rpx;">
							<image style=" height: 150rpx; width: 100rpx;"
								:src="`${yourBaseURL}${listName.mian_image}`"></image>
						</view>
						<view class="">
							<h3>{{listName.title}}</h3>
							<span style="font-size: 20rpx; color:#959595;">作者：{{listName.lead}}</span>
						</view>
					</view>
					<view class=""
						style=" display: flex; justify-content: space-between; align-items: center; width: 90%; margin: auto;">
						<p style="color:#959595;">共{{listName.verse}}章</p>
						<view class="">
							<image style="width: 50rpx; height: 50rpx;" src="../../../static/images/catalogue.png">
							</image>
							<p style="font-size: 20rpx;">顺序</p>
						</view>
					</view>

					<view class="">
						<scroll-view scroll-y="true" class="scroll-Y">
							<view class="classiftBttR">
								<view class="" style="border-bottom: 2rpx solid #ccc; background: #f8f8f8;"
									v-for="(item ,index) in listName.jieList" @click="toJieList(item,index)">
									<view class="" style="display: flex; align-items: center;">
										<view class="" style="margin-left: 10rpx; display: flex; justify-content: space-between;
										 height: 100rpx; width: 100%;line-height: 100rpx;">
											<p style="font-size: 20rpx; color: #6f6f6f;">{{item.title}}</p>
											<!-- <p style="font-size: 20rpx; margin-right: 20rpx; color: #6f6f6f;">免费</p> -->
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 购买章节 -->
		<view class="">
			<uni-popup ref="popupA" type="bottom" :mask-click="false">
				<view class="" style="height: 400px; width: 100%;background: #fcd281;">
					<view class="" style="display: flex; padding: 30rpx;color: #000; justify-content: space-between; ">
						<p>价格：5月饼</p>
						<p>余额：50月饼</p>
					</view>
					<view class="" style="display: flex; justify-content: space-between;
					 align-items: center; border-top: 1px solid #ccc;
					 padding: 30rpx;">
						<p>自动购买下一章</p>
						<view class="">
							<switch :checked="checked" color="#0570fa" style="transform:scale(0.7)"
								@change="switchChange" />

						</view>
					</view>
					<view class="" style="padding: 30rpx;">
						<button @click="toChapter">购买本章</button>
					</view>
					<view class="" style="padding: 30rpx; position: relative;">
						<button style="display: flex;align-items: center; justify-content: center;">
							<image style="width: 30rpx; height: 30rpx;" src="../../../static/images/user/huiyuan.png">
							</image>
							<p style="padding: 0 20rpx;color: #e66638;">加入VIP全场免费 </p>
							<!-- <image style="width: 30rpx; height: 30rpx;" src="../../../static/images/user/you.png"></image> -->
							<view class=""
								style="border-radius: 0 10rpx ; color: #fff; font-size: 12px; width: 150rpx;background: #e66638; position: absolute;top: 0;right: 0;">
								看书更省钱
							</view>

						</button>

					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getautokou,
		getMyUserInfo,
		getMyAddShelf,
		getstratLook,
		getMyBookInfo,
		getBuyBooksJie
	} from '@/http/api.js'
	export default {
		data() {
			return {
				infoId: '',
				autokou1: '',
				checked: '',
				pageInfoChapter: 1,
				list: {},
				nextId: '',
				lastID: '',
				jieInfoID: '',
				yourBaseURL: 'http://hyxs.ychlkj.cn',
				book_id: '',
				menuShow: false,
				callback: 1,
				dataId: '',
				dataIdA: '',
				dataName: "",
				chapter: 1,
				listName: {},
				clickOption: {
					width: uni.upx2px(200),
					height: uni.upx2px(200),
					left: 'auto',
					top: 'auto',

				}
			};
		},
		onLoad(e) {

			this.dataId = e.id
			this.dataIdA = e.idA
			this.book_id = e.idB

			this.MyAddShelf()
			// this.stratLook()
		},
		onReady() {
			// 

			this.stratLook()
			this.MyBookInfo()
		},
		methods: {
			// 购买本章
			toChapter() {
				console.log(this.infoId, "购买1111本章");
				this.BuyBooksJie()
				// this.infoId == this.lastID
				// this.toBelow()
			},
			// 购买章节
			BuyBooksJie(){
				let data = {
					"token": this.userInfo.userinfo.token,
					"bookjie_id": this.infoId,
				}
				
				getBuyBooksJie(data).then((res)=>{
					if(res[1].data.code==1){
						uni.showToast({
							title: '购买成功',
							duration: 2000,
							icon: "none"
						});
						
					}
					console.log(res[1].data.code,"购买章节");
				})
			},
			switchChange(e) {
				console.log(e.detail.value);
				if (e.detail.value == true) {
					this.autokou1 = 1

				} else if (e.detail.value == false) {
					this.autokou1 = 0

				}
				this.autokouA()
				this.MyUserInfo()
				console.log(e.detail.value);
				console.log(this.autokou1, "购买");
			},
			// 用户信息
			MyUserInfo() {
				let data = {
					"token": this.userInfo.userinfo.token
				}
				getMyUserInfo(data).then((res) => {
					this.autokou1 = res[1].data.data.autokou
					if (this.autokou1 == 1) {
						this.checked = true
					} else {
						this.checked = false
					}
					console.log(res[1].data.data.autokou, "goumai");
				})
			},
			autokouA() {
				let data = {
					"token": this.userInfo.userinfo.token,
					"autokou": this.autokou1,
				}

				getautokou(data).then((res) => {
					console.log(res[1].data, "走动购买");
					if (res[1].data.code == 1) {
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							icon: "none"
						});
							this.$refs.popupA.close()
					}
				})
			},
			// change事件
			tochange(pageInfo) {
				 console.log(pageInfo, "chapter123");
				// this.pageInfoChapter = pageInfo.chapter
				// // console.log(pageInfo.chapter, "chapter");
				//  console.log(pageInfo.chapter, "change事件",this.pageInfoChapter);

				const oldChapter = this.pageInfoChapter; // 保存旧值
				this.pageInfoChapter = pageInfo.chapter; // 设置新值


				if (oldChapter !== pageInfo.chapter) {
					console.log('值不同，发生了变化');

					  this.toBelow()
				} else {
					console.log('值相同，未发生变化');
				}

			},
			// 目录章节跳转
			toJieList(item, index) {
				console.log(item, "123", index + 1);
				let data = {
					"token": this.userInfo.userinfo.token,
					"bookjie_id": item.id
				};

				getstratLook(data).then((res) => {
					console.log(res[1].data.data);
					let contents = {
						chapter: index + 1,
						title: res[1].data.data.jieInfo.title,
						content: res[1].data.data.jieInfo.content, //文本内容
						isStart: false, //是否是第一章节
						isEnd: false, //是否是最后一个章节
					}
					console.log(contents, "[][]");
					const {
						page
					} = this.$refs;
					page.change({
						contents: contents,
						start: 0,
						currentChapter: index + 1
					})
				})

				this.$refs.popup.close()

			},
			// 详情
			MyBookInfo() {
				let data = {
					"token": this.userInfo.userinfo.token,
					"id": this.book_id
				}
				getMyBookInfo(data).then((res) => {
					this.listName = res[1].data.data
					// console.log(this.listName, "图书详情接口");
				})
			},
			// 上一章节
			toupper() {
				this.pageInfoChapter--
				let data = {
					"token": this.userInfo.userinfo.token,
					"bookjie_id": this.nextId
				};

				getstratLook(data).then((res) => {
					console.log(res[1].data);
					if (res[1].data.code == 1) {
						if (!res[1].data.data.jieInfo) {
							uni.showToast({
								title: '已经到头啦',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						} else {


							let contents = [{
								chapter: this.pageInfoChapter,
								title: res[1].data.data.jieInfo.title,
								content: res[1].data.data.jieInfo.content, //文本内容
								isStart: false, //是否是第一章节
								isEnd: false, //是否是最后一个章节
							}]
							console.log(contents, "contents");
							const {
								page
							} = this.$refs;

							page.change({
								contents: contents,
								start: 0,
								currentChapter: this.pageInfoChapter
							})

							this.nextId = res[1].data.data.next.id
						}
					} else {
						uni.showToast({
							title: '已经到头啦',
							icon: 'none',
							duration: 2000,
							mask: true
						});
					}

				})

			},
			// 下一章节
			toBelow() {
				
			
			
				this.pageInfoChapter++
				console.log(this.pageInfoChapter,"}}}");
				// console.log(this.lastID, 'lastID');
				let data = {
					"token": this.userInfo.userinfo.token,
					"bookjie_id": this.lastID
				};

				getstratLook(data).then((res) => {
					console.log(res[1].data,"【】【【】】【");
					if (res[1].data.code !== 1) {
						this.infoId = res[1].data.data.info.id
						console.log(res[1].data.data.info.id, "购买本章");
						uni.showToast({
							title: '本章节需要购买才可以看呦',
							icon: 'none',
							duration: 2000,
							mask: true
						});
						this.$refs.popupA.open('buttom')
					} else {
						if (!res[1].data.data.jieInfo) {
							console.log(this.lastID, "[][]");
							uni.showToast({
								title: '已经到头啦',
								icon: 'none',
								duration: 2000,
								mask: true
							});

						} else {
							let contents = [{
								chapter: this.pageInfoChapter,
								title: res[1].data.data.jieInfo.title,
								content: res[1].data.data.jieInfo.content, //文本内容
								isStart: false, //是否是第一章节
								isEnd: false, //是否是最后一个章节
							}]
							const {
								page
							} = this.$refs;
							// console.log(contents, "contents");
							page.change({
								contents: contents,
								start: 0,
								currentChapter: this.pageInfoChapter
							})
							if (res[1].data.data) {
								this.nextId = res[1].data.data.next.id
							}

							if (res[1].data.data) {
								this.lastID = res[1].data.data.last.id
							}

							console.log(res[1].data.data.jieInfo.title, "this.chapter");
						}
					}


				})
			},
			// 点击1弹出11目录
			To() {
				// console.log(this.menuShow);
				this.menuShow = !this.menuShow
			},
			// 点击目录
			todirectory() {
				this.menuShow = false
				this.$refs.popup.open('left')
				console.log("点击目录");
			},
			async stratLook() {
				let data = {
					"token": this.userInfo.userinfo.token,
					"bookjie_id": this.dataIdA
				};

				try {
					const res = await getstratLook(data);
					this.dataName1 = res[1].data.data.jieInfo.content;
					this.title = res[1].data.data.jieInfo.title;
					this.jieInfoID = res[1].data.data.jieInfo.id

					console.log(res[1].data, "[q][w]");
					this.dataName = this.dataName1.toString();

					let contents = [{
						chapter: this.chapter, //章节序号
						content: this.dataName, //文本内容
						title: this.title, //章节标题
						isStart: true, //是否是第一章节
						isEnd: false, //是否是最后一个章节
					}, ]
					const {
						page
					} = this.$refs;
					page.init({
						contents: contents,
						currentChapter: 1, //从第二章节开始阅读 和章节chapter对应
						start: 10 //从章节的第100个字开始阅读
					})
					this.lastID = res[1].data.data.last.id
					// this.nextId = res[1].data.data.next.id

					// console.log(this.dataName, "我的");
				} catch (error) {
					// 处理错误
					throw error;
				}
			},


			more1(chapter, callback) {

				this.callback = callback;
				let data = {
					"token": this.userInfo.userinfo.token,
					"bookjie_id": this.lastID
				};

				getstratLook(data).then((res) => {
					console.log(res[1].data.data);
					if (res[1].data.code !== 1) {
						uni.showToast({
							title: res[1].data.msg,
							icon: 'none',
							duration: 2000,
							mask: true
						});

						let contents = {
							chapter: chapter,
							title: res[1].data.data.info.title,
							content: res[1].data.data.info.content, //文本内容
							isStart: false, //是否是第一章节
							isEnd: false, //是否是最后一个章节
						}
						callback('success', contents)
						// console.log(res[1].data, "章节");
						// this.$refs.popupA.open('buttom')
					} else {
						let contents = {
							chapter: chapter,
							title: res[1].data.data.jieInfo.title,
							content: res[1].data.data.jieInfo.content, //文本内容
							isStart: true, //是否是第一章节
							isEnd: false, //是否是最后一个章节
						}
						callback('success', contents)
					}
					// console.log( res[1].data.data.info,"[][]");



					// console.log(res[1].data, "章节");
					if (res[1].data.data.last) {
						this.lastID = res[1].data.data.last.id
					}

				})



			},

			MyAddShelf() {
				this.userInfo = uni.getStorageSync('userInfo');
				let data = {
					token: this.userInfo.userinfo.token,
					id: this.dataId
				}
				getMyAddShelf(data).then((res) => {
					// console.log(res[1].data, "我的书架");
				})
			},

		}
	}
</script>

<style lang="scss">
	.popup-inner1 {
		width: 300px;

		// padding:  20px 20px 0 20px;
		background-color: #ffffff;
		border-radius: 4px;



		// text-align: center;
	}

	.close-button {
		margin-top: 10px;
		padding: 10px 20px;
		background-color: #909399;
		color: #ffffff;
		border: none;
		border-radius: 4px;
	}

	.classiftBttR {
		background-color: #ffffff;
		border-radius: 10px;
		box-sizing: border-box;
		// padding: 2vw 1vw;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-Y {
		height: 100vh
	}
</style>